<template>
  <div class="video-box" ref="videoBox" @dblclick="fullScreen" @click="handleShow" @touchstart="handleShow">
    <!--video 盒子-->
    <video class="video-box-body" autoplay ref="videoBody" :id="`video${videoIndex}`"></video>
    <!--控制条盒子-->
    <div :class="`video-control ${size}`" v-show="showControls" v-if="videoIndex !== 'Mix' && openControls">
      <!--视频分发键-->
      <div class="control-btn" v-if="dispenseable" @click.stop="distrubution" @touchstart.stop.prevent="distrubution">
        <svg-icon icon-class="share"></svg-icon>
      </div>
      <!--拨打号码键-->
      <div class="control-btn" v-if="!hidebinding && bindingUser">
        <el-dropdown v-if="bindingUser.length > 1" @command="makeCallAudio" class="person-dropdown">
          <svg-icon icon-class="call-audio"></svg-icon>
          <el-dropdown-menu slot="dropdown" class="person-dropdown-menu">
            <el-dropdown-item v-for="(item, index) in bindingUser" :key="index" :command="item">{{ item.realName }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <svg-icon v-else icon-class="call-audio" @click.stop="makeCallAudio(bindingUser[0])"></svg-icon>
      </div>
      <!--退出键-->
      <div class="control-btn" @click.stop="exitVideo" @touchstart.stop.prevent="exitVideo">
        <svg-icon :icon-class="videoIndex === '_remote' ? 'hangup' : 'exit'"></svg-icon>
      </div>
    </div>
    <div :class="`video-control ${size}`" v-show="showControls" v-else-if="openControls">
      <!--视频分发键-->
      <div class="control-btn" @click.stop="distrubution">
        <svg-icon icon-class="share"></svg-icon>
      </div>
      <!--分辨率-->
      <el-popover placement="top" trigger="manual" :visible-arrow="false" popper-class="radio-popper"
        v-model="radioVisible">
        <div class="radio-item" :class="{ isCurrentRatio: opt.label === ratio }" v-for="opt in ratioOptions"
          :key="opt.value" @click.stop="setRatio(opt)">
          {{ `${opt.label}(${opt.value})` }}
        </div>
        <div class="control-btn" :class="{ 'ratio-1080P': ratio === '全高清' }" slot="reference"
          @click.stop="hideOthers('radioVisible')">
          <span class="title">{{ ratio }}</span>
        </div>
      </el-popover>

      <!--多画面-->
      <el-popover placement="top" trigger="manual" :visible-arrow="false" popper-class="multi-screen-popper"
        v-model="mutilScreenVisible">
        <div class="multi-screen-row">
          <img class="multi-screen-col" :class="{ isCurrentMuti: val === multiScreen }" v-for="val in [1, 2, 4]"
            :key="val" @click.stop="setMultiScreen(val)" :src="require(`@/assets/images/${val}.png`)" />
        </div>
        <div class="multi-screen-row">
          <img class="multi-screen-col" :class="{ isCurrentMuti: val === multiScreen }" v-for="val in [6, 8, 9]"
            :key="val" @click.stop="setMultiScreen(val)" :src="require(`@/assets/images/${val}.png`)" />
        </div>
        <div class="control-btn" slot="reference" @click.stop="hideOthers('mutilScreenVisible')">
          <img class="multi-screen-img" :src="require(`@/assets/images/${multiScreen}.png`)" />
        </div>
      </el-popover>

      <!--删除混码成员-->
      <el-popover placement="top" trigger="manual" :visible-arrow="false" popper-class="delete-mix-popper"
        v-model="deletMixVisible">
        <div class="delete-mix-box" v-if="multiScreen === 1">
          <div class="item-1">
            <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
          </div>
        </div>
        <div class="delete-mix-box" v-else-if="multiScreen === 2">
          <div class="item-2-row">
            <div class="item-2">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
            </div>
            <div class="item-2">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(1)"></svg-icon>
            </div>
          </div>
        </div>
        <div class="delete-mix-box" v-else-if="multiScreen === 4">
          <div class="item-4-row">
            <div class="item-4">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
            </div>
            <div class="item-4">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(1)"></svg-icon>
            </div>
          </div>
          <div class="item-4-row">
            <div class="item-4">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(2)"></svg-icon>
            </div>
            <div class="item-4">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(3)"></svg-icon>
            </div>
          </div>
        </div>
        <div class="delete-mix-box" v-else-if="multiScreen === 6">
          <div class="item-6-row-1">
            <div class="item-6-col-1">
              <div class="item-6-2">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
              </div>
            </div>
            <div class="item-6-col-2">
              <div class="item-6-1">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(1)"></svg-icon>
              </div>
              <div class="item-6-1">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(2)"></svg-icon>
              </div>
            </div>
          </div>
          <div class="item-6-row-2">
            <div class="item-6-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(3)"></svg-icon>
            </div>
            <div class="item-6-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(4)"></svg-icon>
            </div>
            <div class="item-6-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(5)"></svg-icon>
            </div>
          </div>
        </div>
        <div class="delete-mix-box" v-else-if="multiScreen === 8">
          <div class="item-8-row-1">
            <div class="item-8-col-1">
              <div class="item-8-3">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
              </div>
            </div>
            <div class="item-8-col-2">
              <div class="item-8-1">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(1)"></svg-icon>
              </div>
              <div class="item-8-1">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(2)"></svg-icon>
              </div>
              <div class="item-8-1">
                <svg-icon icon-class="delete-mix" @click.stop="deleteMix(3)"></svg-icon>
              </div>
            </div>
          </div>
          <div class="item-8-row-2">
            <div class="item-8-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(4)"></svg-icon>
            </div>
            <div class="item-8-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(5)"></svg-icon>
            </div>
            <div class="item-8-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(6)"></svg-icon>
            </div>
            <div class="item-8-1">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(7)"></svg-icon>
            </div>
          </div>
        </div>
        <div class="delete-mix-box" v-else-if="multiScreen === 9">
          <div class="item-9-row">
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(0)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(1)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(2)"></svg-icon>
            </div>
          </div>
          <div class="item-9-row">
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(3)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(4)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(5)"></svg-icon>
            </div>
          </div>
          <div class="item-9-row">
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(6)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(7)"></svg-icon>
            </div>
            <div class="item-9">
              <svg-icon icon-class="delete-mix" @click.stop="deleteMix(8)"></svg-icon>
            </div>
          </div>
        </div>
        <div class="control-btn" slot="reference" @click.stop="hideOthers('deletMixVisible')">
          <svg-icon icon-class="delete"></svg-icon>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  props: {
    size: {
      type: String,
      default: 'small',
    },
    videoIndex: {
      type: String,
      default: '',
    },
    videoID: {
      type: String,
      default: '',
    },
    webrtc2Sip: Object,
    ctrlSize: {
      type: String,
      default: 'small',
    },
    dispenseable: {
      type: Boolean,
      default: true,
    },
    hidebinding: {
      type: Boolean,
      default: true,
    },
    loading: Boolean,
    mixType: Number,
  },
  data() {
    return {
      openControls: false, // 是否能显示控制条，只有视频已播放才为true
      showControls: false, // 显示控制条
      clickTimer: null,
      radioVisible: false,
      ratio: '高清',
      ratioOptions: [
        {
          label: '全高清',
          value: '1080P',
        },
        {
          label: '高清',
          value: '720P',
        },
        {
          label: '标清',
          value: '4CIF',
        },
        {
          label: '流畅',
          value: '480P',
        },
        {
          label: '极速',
          value: 'CIF',
        },
      ],
      multiScreen: 1,
      mutilScreenVisible: false,
      deletMixVisible: false,
    }
  },
  computed: {
    bindingUser() {
      console.log(
        'bindingUser',
        this.$store.state.cache.bindingVideoMap.get(this.videoID)
      )
      console.log(
        'bindingUser',
        this.videoID,
        this.$store.state.cache.bindingVideoMap
      )
      return this.$store.state.cache.bindingVideoMap.get(this.videoID)
    },
  },
  watch: {
    mixType(val) {
      this.multiScreen = val
    },
  },
  methods: {
    // 拨打号码
    makeCallAudio(user) {
      let data = { obj: user }
      if (user.operatorID) data.type = 'operator'
      else if (user.employeeID) data.type = 'employee'
      this.$emit('makeCall', data)
    },
    addEventListener() {
      let el = this.$refs['videoBody']
      el.addEventListener('play', this.playEvent, false)
    },
    playEvent() {
      this.$emit('update:loading', false)
      this.openControls = true
    },
    closeControls() {
      this.openControls = false
    },
    // 隐藏其他选项
    hideOthers(label) {
      switch (label) {
        case 'radioVisible':
          this.deletMixVisible = false
          this.mutilScreenVisible = false
          this.radioVisible = true
          break
        case 'deletMixVisible':
          this.radioVisible = false
          this.mutilScreenVisible = false
          this.deletMixVisible = true
          break
        case 'mutilScreenVisible':
          this.radioVisible = false
          this.deletMixVisible = false
          this.mutilScreenVisible = true
          break
      }
    },
    // 删除混码区视频
    deleteMix(index) {
      this.hideControls()
      this.$emit('deleteMixIndex', index)
    },
    // 退出视频
    exitVideo() {
      this.hideControls()
      this.openControls = false
      this.$emit(
        'videoExit',
        Number.isInteger(this.videoIndex)
          ? Number.parseInt(this.videoIndex)
          : this.videoIndex,
        this.webrtc2Sip
      )
    },
    // 设置混码分屏
    setMultiScreen(num) {
      this.multiScreen = num
      this.hideControls()
      this.$emit('setMultiscreen', num)
    },
    // 设置混码分辨率
    setRatio(opt) {
      this.ratio = opt.label
      this.hideControls()
      this.$emit('setMixResolution', opt.value)
    },
    // 视频分发
    distrubution() {
      this.hideControls()
      this.$emit(
        'videoDistribution',
        Number.isInteger(this.videoIndex)
          ? Number.parseInt(this.videoIndex)
          : this.videoIndex
      )
    },

    // 全屏
    fullScreen() {
      if (!this.openControls) return
      if (this.clickTimer) {
        clearTimeout(this.clickTimer)
        this.clickTimer = null
      }
      if (!screenfull.isEnabled) {
        this.$message({
          message: '浏览器不支持全屏',
          type: 'warning',
          showClose: true,
          duration: 3 * 1000,
        })
        return false
      }
      this.hideControls()
      let el = this.$refs.videoBox
      screenfull.toggle(el)
    },
    // 隐藏工具栏
    hideControls() {
      this.radioVisible = false
      this.mutilScreenVisible = false
      this.deletMixVisible = false
      this.showControls = false
    },
    // 显示或隐藏
    handleShow(e) {
      console.log('handleShow', e, this.openControls)
      if (!this.openControls) return
      if (this.clickTimer) {
        clearTimeout(this.clickTimer)
        this.clickTimer = null
      }
      this.clickTimer = setTimeout(() => {
        this.showControls ? this.hideControls() : (this.showControls = true)
      }, 200)
    },
  },
  mounted() {
    this.addEventListener()
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/video_box.scss';
</style>

<style lang="scss">
@import '~@/assets/scss/video_box_global.scss';
</style>
